<template>
  <div class="user">
    <div class="user-details">
      <div class="title">个人中心</div>

      <div class="user-info">
        <div class="user-icon"><img src="../assets/garage.png" alt="头像"></div>
        <div class="user-box">
          <div class="user-name text-ellipsis">山西天德汽修</div>
          <div class="user-sign">hello world</div>
        </div>
      </div>

      <div class="activity">
        <img src="../assets/user-icon.png" alt="">
        <span>我的奖金:888元</span>
        <span class="line">|</span>
        <img src="../assets/qr-code.png" alt="">
        <span>扫码人数:235人</span>
      </div>
      <div class="ranking-box"><div class="ranking">查看排行</div></div>

    </div>

    <div class="content">
      <div class="content-info">
        <div class="text-order">现在邀请新用户注册并成功下单</div>
        <div class="red-envelope">就有80元红包!</div>
        <div class="activity-rule-box">
          <div v-if="false">邀请越多赚越多,不封顶!</div>
          <div @click="showRule" class="activity-rule">活动规则 &gt;</div>
        </div>
        <div class="invite-btn" >
          <router-link to="./posters"><img src="../assets/user-invite.png" alt="邀请"></router-link>
        </div>
      </div>
    </div>

    <div v-if="isShowRule" class="popup">
     <div class="rule-popup-content">
       <div class="rule-title">活动规则</div>
       <div @click="popupClose" class="rule-close">
         <img src="../assets/rule-close.png" alt="关闭">
       </div>
       <div class="rule-content">
         <div class="subhead">关于新客礼包</div>
         <div class="rule-text">
           <p>1. 活动时间：2017年12月19日-2018年1月31日</p>
           <p>2. 符合条件的客户进入活动后可以获得新客礼包，礼包含以下内容:</p>
           <p>无门槛体验券 满50减50*2</p>
           <p>商城囤货体验 满388减100*1</p>
           <p>询单专享体验 满588减100*1</p>
           <p>商城囤货&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;满1888减100*1  满2888减200*1 满3888减400*1</p>
           <p>询单专享&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;满1888减100*1  满2888减200*1 满3888减400*1</p>
           <p>开思币：188个</p>
           <p>3. 优惠券获得与有效期：实时到账，领取后30天内使用有效</p>
           <p>4. 开思币获得与有效期：实时到账，长期有效</p>
           <p>5. 用户领取礼包后，奖励自动同步至开思汽配电脑端、APP端、微信端的商城，采购配件时均可使用</p>
           <p>6. 优惠券使用后，若取消订单或者产生退货，优惠券不予返还</p>
           <p>7. 每个订单限用1张优惠券，采购时请注意优惠券的使用范围</p>
         </div>
         <div class="subhead">关于推广奖励</div>
         <div class="rule-text">
           <p>1. 活动时间：2017年12月19日-2018年1月31日</p>
           <p>2. 每个成功注册的用户，均可成为推广者</p>
           <p>3. 推广者通过活动生成个人的专属二维码，通过该二维码进入的用户成功注册并下单，推广者即可获得80元话费红包,
             可累加，例：3个用户通过推广者A的二维码进入活动页面，均注册认证成功后，
             各自下了一个或以上数量的订单，则A可以获得80*3=240元话费</p>
           <p>4. 话费红包将在活动结束后5个工作日内进行统一发放</p>
         </div>
         <div class="cass-text">本次活动最终解释权归深圳开思时代科技有限公司所有</div>
       </div>
     </div>
    </div>

    <div v-if="isLoginOrregisterSuccess" class="popup success-popup">
     <div class="success-box">
       <div class="success-popup-content">
         <div @click="popupClose" class="rule-close">
           <img src="../assets/rule-close.png" alt="关闭">
         </div>
         <div class="success-icon"></div>
         <div class="success-success">登录成功!</div>
         <div class="success-text">
           <span>欢迎来到开思,</span>
           <span class="gift-bag">1888元臻享福利礼包</span>
           <span>已放入您的账户啦!</span>
         </div>
         <div class="success-btn">
           <div class="success-order">立即去下单</div>
           <div @click="popupClose" class="success-stroll">在逛逛</div>
         </div>
       </div>
     </div>
    </div>


  </div>
</template>

<script>
  const successInfo = {
    login: '登录成功',
    loginText: '立即去下单',
    register: '注册成功',
    registerText: '立即去认证'
  };
  export default {
    data() {
      return {
        isShowRule: false,
        isLoginOrregisterSuccess: true,
        successText: '',
        successhandle: ''
      };
    },
    methods: {
      popupClose() {
        this.isShowRule = false;
        this.isLoginOrregisterSuccess = false;
      },
      showRule() {
        this.isShowRule = true;
      }
    }
  };
</script>

<style scoped>
  user {
    width: 100%;
    height: 100%;
    position: relative;
  }

  .user-details {
    position: relative;
    width: 100%;
    height: 5rem;
    background-image: url('../assets/user-head-bg.jpg');
    -webkit-background-size: contain;
    background-size: 100%;
    background-repeat: no-repeat;
    color: #fff;
  }

  .title {
    width: 100%;
    background-image: url('../assets/user-title.jpg');
    -webkit-background-size: contain;
    background-size: 100%;
    background-repeat: no-repeat;
    font-size: 0.45rem;
    height: 1.13rem;
    text-align: center;
    line-height: 1.13rem;
  }

  .user-info {
    display: flex;
    padding: 0.18rem 0 0.19rem 1.18rem;
  }

  .user-icon img {
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 0.54rem;
  }

  .user-name  {
    font-size: 0.42rem;
    margin: 0.1rem 0 0.1rem 0;
  }

  .user-sign {
    height: 0.38rem;
    width: 1.38rem;
    border: 1px solid #fff;
    border-radius: 0.2rem;
    font-size: 0.22rem;
    text-align: center;
    line-height: 0.38rem;
  }
  .activity {
    display: inline-block;
    vertical-align: middle;
    font-size: 0.3rem;
    padding-left: 0.88rem;
    margin-bottom: 0.24rem;
  }

  .activity img {
    width: 0.25rem;
    height: 0.25rem;
  }

  .activity .line {
    margin: 0 0.27rem;
  }

  .ranking-box {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .ranking {
    text-align: center;
    line-height: 0.48rem;
    border: 1px solid #fff;
    height: 0.48rem;
    width: 2.4rem;
    font-size: 0.28rem;
    border-radius: 0.26rem;
  }
  .content {
    position: relative;
    width: 100%;
  }

  .content-info {
    width: 100%;
    position: absolute;
    left: 0;
    top: -0.48rem;
    height: 8.82rem;
    background-image: url('../assets/user-foot-bg.png');
    -webkit-background-size: contain;
    background-size: 100%;
    background-repeat: no-repeat;
  }

  .text-order {
    margin: 2.9rem 0 0 1.1rem;
    font-weight: 600;
    font-size: 0.38rem;
    color: #686868;
  }

  .red-envelope {
    font-weight: 800;
    margin-left: 1.2rem;
    font-size: 0.81rem;
    color: #f98728;
  }

  .activity-rule-box {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 1.1rem;
  }

  .activity-rule {
    font-size: 0.28rem;
    color: #686868;
    text-align: center;
    border-bottom: 0.02rem solid #686868;
  }

  .content .invite-btn {
    margin-top: 1.3rem;
    padding: 0 0.96rem;
    height: 0.94rem;
  }

  .content .invite-btn img {
    width: 100%;
  }

  .popup {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.62);
  }

  .rule-popup-content {
    position: absolute;
    top: 1.1rem;
    left: 0.35rem;
    width: 6.8rem;
    height: 11rem;
    border-radius: 0.3rem;
    background-color: #fff;
  }

  .rule-title {
    width: 100%;
    height: 1.23rem;
    background-image: url('../assets/rule-title.png');
    -webkit-background-size: contain;
    background-size: 100%;
    background-repeat: no-repeat;
    text-align: center;
    line-height: 1.23rem;
    color: #fff;
    font-size: 0.6rem;
  }

  .rule-content {
    width: 100%;
    height: 9rem;
    overflow-y: scroll;
  }

  .subhead {
    margin: 0.24rem 0 0.24rem 0;
    width: 2.8rem;
    height: 0.66rem;
    background-image: url('../assets/rule-subhead.png');
    -webkit-background-size: contain;
    background-size: 100%;
    background-repeat: no-repeat;
    text-align: center;
    line-height: 0.66rem;
    color: #fff;
    font-size: 0.32rem;
  }

  .rule-close {
    position: absolute;
    top: -0.25rem;
    right: -0.25rem;
    width: 0.76rem;
    height: 0.76rem;
    border-radius: 0.5rem;
  }

  .rule-close img {
    width: 0.76rem;
    height: 0.76rem;
  }

  .rule-text {
    padding: 0 0.56rem 0 0.48rem;
    font-size: 0.26rem;
    color: #686868;
  }

  .rule-content p {
    line-height: 0.4rem;
  }

  .cass-text {
    padding: 0 0.56rem 0 0.48rem;
    margin-top: 0.24rem;
    font-size: 0.24rem;
    color: #686868;
  }

  .success-popup {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .success-popup-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 5.06rem;
    height: 6.47rem;
    background-image: url('../assets/success-bg.png');
    -webkit-background-size: contain;
    background-size: 100%;
    background-repeat: no-repeat;
  }

  .success-box {
    position: relative;
  }

  .success-icon {
    margin-top: 0.3rem;
    width: 1.36rem;
    height: 1.36rem;
    background-image: url('../assets/success.png');
    -webkit-background-size: contain;
    background-size: 100%;
    background-repeat: no-repeat;
  }

  .success-success {
    margin: 0.3rem 0 0.76rem 0;
    font-size: 0.46rem;
    color: #686868;
  }

  .success-text {
    font-size: 0.26rem;
    color: #686868;
    padding: 0 0.46rem;
    margin-bottom: 0.8rem;
  }

  .gift-bag {
    color: #5a87e5;
    font-weight: 600;
  }

  .success-btn {
    display: flex;
  }

  .success-order,
  .success-stroll {
    width: 1.75rem;
    height: 0.5rem;
    text-align: center;
    line-height: 0.5rem;
    font-size: 0.26rem;
    color: #fff;
    background-image: url('../assets/success-btn.png');
    -webkit-background-size: contain;
    background-size: 100%;
    background-repeat: no-repeat;
  }

  .success-order {
    margin-right: 0.25rem;
  }


</style>
